<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分表问题自动处理</title>
    <style>
        body {
            background-color: #f2f2f2; /* 设置整体背景色 */
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        #inputContainer {
            margin-top: 20px;
            text-align: center;
        }

        input[type="text"] {
            width: 300px;
            height: 30px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            padding: 5px;
            transition: border-color 0.3s ease-in-out; /* 设置鼠标悬停时的动态效果 */
        }

        input[type="text"]:hover {
            border-color: #666;
        }

        button {
            width: 150px;
            height: 40px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease-in-out; /* 设置鼠标悬停时的动态效果 */
        }

        button:hover {
            background-color: #0056b3;
        }

        #response {
            margin-top: 20px;
            padding: 10px;
            border-radius: 5px;
            background-color: #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }

        .hintFile {
            color: red; /* hintFile 属性红色字体 */
        }

        .hasCommitFile {
            color: red; /* hasCommitFile 属性红色字体 */
        }
        .infoDiv {
            border: 3px solid red;
            background: yellow;

        }
    </style>
</head>
<body>
<div id="inputContainer">
    <input type="text" id="customerId" placeholder="客户ID"><br>
    <input type="text" id="qc" placeholder="对应qc号(必填)"><br>
    <input type="text" id="eteamsId" placeholder="ETEAMSID(过期需填写)"><br>
    <input type="text" id="kb" placeholder="客户kb(非必填)"><br>
    <input type="text" id="dbType" placeholder="客户数据库缩写(非必填)"><br>
    <input type="text" id="projectUrl" placeholder="客户内网地址(非必填)"><br>
    <input type="text" id="clientBakFilePath" placeholder="客户备案文件地址(非必填)"><br>
    <button onclick="sendRequest()">发送请求</button>
</div>

<div id="response"></div>

<script>
    function sendRequest() {
        var textInputs = document.querySelectorAll('input[type="text"]');
        for (var i = 0; i < textInputs.length; i++) {
            textInputs[i].disabled = true;
        }
        var customerId = document.getElementById('customerId').value;
        var eteamsId = document.getElementById('eteamsId').value;
        var projectUrl = document.getElementById('projectUrl').value;
        var kb = document.getElementById('kb').value;
        var dbType = document.getElementById('dbType').value;
        var clientBakFilePath = document.getElementById('clientBakFilePath').value;
        var qc = document.getElementById('qc').value;
        var url = '/auto/commits';
        var data = {};

        // 检查文本框的值，只将有内容的文本框对应的参数放入请求体中
        if (customerId !== '') {
            data.customerId = customerId;
        }
        if (projectUrl !== '') {
            data.projectUrl = projectUrl;
        }
        if (kb !== '') {
            data.kb = kb;
        }
        if (dbType !== '') {
            data.dbType = dbType;
        }
        if (eteamsId !== '') {
            data.eteamsId = eteamsId;
        }
        if (qc !== '') {
            data.qc = qc;
        }
        if (clientBakFilePath !== '') {
            data.clientBakFilePath = clientBakFilePath;
        }

        var responseDiv = document.getElementById('response');
        responseDiv.innerHTML = ''; // 清空之前的内容
        var alertBox = document.createElement('div');
        alertBox.innerText = '请求已发送，等待返回结果';
        alertBox.style.backgroundColor = '#f2f2f2';
        alertBox.style.padding = '10px';
        alertBox.style.borderRadius = '5px';
        alertBox.style.position = 'fixed';
        alertBox.style.top = '10px';
        alertBox.style.left = '50%';
        alertBox.style.transform = 'translateX(-50%)';
        alertBox.style.zIndex = '9999';
        document.body.appendChild(alertBox);
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => response.json())
            .then(data => {
                var responseDiv = document.getElementById('response');
                responseDiv.innerHTML = ''; // 清空之前的内容
                if (data.code === 0) {
                    if (data.data && typeof data.data === 'object') {
                        if (data.data.infos) {
                            var infoDiv = document.createElement('div');
                            infoDiv.innerHTML = data.data.infos;
                            infoDiv.classList.add('infoDiv');
                            responseDiv.appendChild(infoDiv);

                        }
                        // 输出 rightFile 属性
                        if (data.data.rightFile && Array.isArray(data.data.rightFile)) {
                            var rightFileDiv = document.createElement('div');
                            var rightFileContent = '<p>已经正确提交的文件：</p>';
                            for (var k = 0; k < data.data.rightFile.length; k++) {
                                rightFileContent += data.data.rightFile[k] + '<br>';
                            }
                            rightFileDiv.innerHTML = rightFileContent;
                            responseDiv.appendChild(rightFileDiv);
                        }
                        var split = document.createElement('div');
                        split.innerHTML = '<p>------ 以下是本次未处理完成的问题列表  ---------</p>';
                        responseDiv.appendChild(split);
                        if (data.data.question && Array.isArray(data.data.question)) {
                            var sloveDiv = document.createElement('div');

                            var sloveDesc = '<p></p>';

                            for (var i = 0; i < data.data.question.length; i++) {
                                sloveDesc+= (i+1)+'、'+data.data.question[i].questionDesc+'<br>';
                                sloveDesc+= data.data.question[i].resolveDesc+'<br>'
                            }
                            if (data.data.question.length > 0) {
                                sloveDiv.innerHTML = sloveDesc;
                                responseDiv.appendChild(sloveDiv);
                            }
                        }

                        // 输出 hintFile 属性
                        if (data.data.hintFile && Array.isArray(data.data.hintFile)) {
                            var hintFileDiv = document.createElement('div');
                            hintFileDiv.classList.add('hintFile');
                            var hintFileContent = '<p>与初始文件不一致的文件（可能存在二开）：</p>';
                            for (var i = 0; i < data.data.hintFile.length; i++) {
                                hintFileContent += data.data.hintFile[i] + '<br>';
                            }
                            if (data.data.hintFile.length > 0) {
                                hintFileDiv.innerHTML = hintFileContent;
                                responseDiv.appendChild(hintFileDiv);
                            }

                        }

                        // 输出 hasCommitFile 属性
                        if (data.data.hasCommitFile && Array.isArray(data.data.hasCommitFile)) {
                            var hasCommitFileDiv = document.createElement('div');
                            hasCommitFileDiv.classList.add('hasCommitFile');
                            var hasCommitFileContent = '<p>以下是已经提交过的文件信息：</p>';
                            for (var j = 0; j < data.data.hasCommitFile.length; j++) {
                                hasCommitFileContent += data.data.hasCommitFile[j] + '<br>';
                            }
                            if (data.data.hasCommitFile.length > 0) {
                                hasCommitFileDiv.innerHTML = hasCommitFileContent;
                                responseDiv.appendChild(hasCommitFileDiv);
                            }

                        }


                    }
                } else {
                    responseDiv.innerHTML = data.message;
                }
                //接触文本框不可编辑状态
                for (var i = 0; i < textInputs.length; i++) {
                    textInputs[i].disabled = false;
                }
                //请求中弹框取消显示
                alertBox.style.display = 'none';

            })
            .catch(error => console.error('Error:', error));
    }
</script>
</body>
</html>
